<template>
  <div class="lesson-main">
    <el-row>
      <el-col :span="18">
        <div class="tabs" id="lessonTabs">
          <el-tabs stretch v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="课程介绍" name="first">
              <lesson-description></lesson-description>
            </el-tab-pane>
            <el-tab-pane label="直播目录" name="second">
              <live-directory v-if="liveDirectory === 'live'"></live-directory>
              <lesson-none v-if="liveDirectory === 'none'"></lesson-none>
              <not-buy v-if="liveDirectory === 'notBuy'"></not-buy>
            </el-tab-pane>
            <el-tab-pane label="录播目录" name="third">
              <video-directory></video-directory>
            </el-tab-pane>
            <el-tab-pane label="课程评论" name="fourth">
               <lesson-discuss></lesson-discuss>
            </el-tab-pane>
            <el-tab-pane label="课程资料" name="five">
              <lesson-materials></lesson-materials>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <teacher-plate></teacher-plate>
        <student-plate></student-plate>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import teacherPlate from './subpage/teacherPlate'
import studentPlate from './subpage/studentPlate'
import lessonDescription from './subpage/lessonDescription'
import liveDirectory from './subpage/liveDirectory'
import videoDirectory from './subpage/videoDirectory'
import lessonDiscuss  from './subpage/lessonDiscuss'
import lessonMaterials from './subpage/lessonMaterials'
import lessonNone  from './subpage/lessonNone'
import notBuy      from './subpage/notBuy'
export default {
  components: {
    teacherPlate,
    studentPlate,
    lessonDescription,
    liveDirectory,
    videoDirectory,
    lessonMaterials,
    lessonDiscuss,
    lessonNone,
    notBuy
  },
  data() {
    return {
      activeName: 'first',
      liveDirectory:'live',//TODO:存在直播-live|不存在直播-none|未购买-notBuy
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../common/index.less';
.lesson-main {
  margin-bottom: 70px;
}
.tabs {
  padding: 37px 80px;
  padding-top: 0;
  min-height: 988px;
  background: @baseBgColor;
  margin-right: 30px;
}
</style>
<style lang="less">
#lessonTabs {
  .el-tabs__item {
    font-size: 18px;
    height: 80px;
    line-height: 80px;
  }
}
</style>
